LinHuijuan's Blog

Flutter & Native 混合开发

# Flutter & Native 混合开发

参考教程： Flutter跟Native相互通信Platform Channels (opens new window)

# 一、通信

flutter是直接可以调用native端的代码，可以跟原生通信，通信的名词称为：Platform Channels（平台通道）。应用的Flutter部分通过平台通道（platform channel）将消息发送到其应用程序的所在的宿主（iOS或Android）。

# 1.1 Flutter调用Native

# 1.1.1Native端

# 1.1.1.1 MethodChannel

  • 用于传递方法调用（method invocation）通常用来调用native中某个方法。

  • onMethodCall(MethodCall call, MethodChannel.Result result)：在Flutter发送请求时， onMethodCall方法会执行。

    • call是消息内容。
    call.method // 调用的方法名
call.arguments // 调用方法所传递的入参
    1
    2
    • Result对象是回调数据给flutter中使用的，有三个方法。
result.success(data);     // 成功的时候，返回数据调用
result.error();           // 失败的情况下，调用
result.notImplemented();  // 列子中HTTP_GET方法没有实现的话，可以告诉flutter方法没有实现
1
2
3

# 1.1.1.1 Flutter端

platform.invokeMethod
1

# 1.2 Native调用Flutter

# 1.2.1 Flutter端

platform.setMethodCallHandler(platformCallHandler);

Future<dynamic> platformCallHandler(MethodCall call) async {
    switch (call.method) {
        case "getFlutterName":
            return "Flutter name flutter";
            break;
    }
}
1
2
3
4
5
6
7
8
9

# 1.2.2 Native端

channel.invokeMethod("getFlutterName", null, new MethodChannel.Result() {
    @Override
    public void success(Object o) {
        // 这里就会输出 "Flutter name flutter"
        Log.i("debug", o.toString());
    }
    @Override
    public void error(String s, String s1, Object o) {
    }
    @Override
    public void notImplemented() {
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 二、页面跳转

参考教程：Flutter混合开发的路由栈管理 (opens new window)

# 2.1 Native 跳转到 Flutter

  • 方式一：
MainActivity:
Intent intent = new Intent(this,FlutterContainerActivity.class);
startActivity(intent);

FlutterContainerActivity:
@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "defaultRoute");
        setContentView(flutterView);
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 方式二：
flutterEngine = new FlutterEngine(this);
flutterEngine.getNavigationChannel().setInitialRoute("/Result");
1
2

flutter 实战